<template>
	<view class="tabs flex-center">
		<view class="tab-item" v-for="(item,index) in list" :key="index" @click="tabClick(item)"
			:class="{active: current == item.value }">
			{{item.title}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => {
					return [
						// {
						// 	title: '全部',
						// 	value: 0,
						// },
						// {
						// 	title: '待付款',
						// 	value: 1,
						// },
					];
				}
			},
			current: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				// tabSelect: {
				// 	title: '全部',
				// 	value: 0,
				// },
				// tabList: [{
				// 		title: '全部',
				// 		value: 0,
				// 	},
				// 	{
				// 		title: '待付款',
				// 		value: 1,
				// 	},
				// 	{
				// 		title: '待使用',
				// 		value: 2,
				// 	},
				// 	{
				// 		title: '已使用',
				// 		value: 3,
				// 	},
				// 	{
				// 		title: '已取消',
				// 		value: 4,
				// 	},
				// 	{
				// 		title: '退款订单',
				// 		value: 4,
				// 	},
				// ],
			}
		},

		methods: {
			tabClick(item) {


				// this.tabSelect = item
				// this.initQuery();
				// this.setView();
			},

			// gridClick(item, index) {
			// 	this.$emit('emitGridClick', {
			// 		type: '点击宫格',
			// 		data: {
			// 			item: item,
			// 			index: index,
			// 			list: this.list,
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		.tab-item {
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			// padding: 25rpx 0;
			text-align: center;
			flex: 1;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;

			&.active {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;


				&::after {
					content: '';

					position: absolute;
					z-index: 2;
					bottom: 0;
					left: 50%;
					transform: translate(-50%);
					width: 40rpx;
					height: 6rpx;
					background: #44C4BE;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
				}
			}
		}
	}
</style>